<template>
  <div>
    <video ref="videoPlayer" controls autoplay muted></video>
  </div>
</template>

<script>
import flvjs from "flv.js";

export default {
  data() {
    return {
      videoUrl:
        "https://rtmp01open.ys7.com:9188/v3/openlive/BC8856996_1_2.flv?expire=1777862769&id=840902459575500800&t=3875e94ab6989be283523c03b462661f09a8a964e72f682fb769cc93c2e22279&ev=100",
      flvPlayer: null,
    };
  },
  mounted() {
    this.initPlayer();
  },
  beforeDestroy() {
    this.destroyPlayer();
  },
  methods: {
    initPlayer() {
      if (flvjs.isSupported()) {
        this.flvPlayer = flvjs.createPlayer({
          type: "flv",
          url: this.videoUrl,
          isLive: true,
          hasAudio: false,
        });
        this.flvPlayer.attachMediaElement(this.$refs.videoPlayer);
        this.flvPlayer.load();
        this.flvPlayer.play().catch((e) => {
          console.error("播放失败:", e);
        });
      } else {
        console.error("浏览器不支持 flv.js");
      }
    },
    destroyPlayer() {
      if (this.flvPlayer) {
        this.flvPlayer.destroy();
      }
    },
  },
};
</script>

<style>
video {
  width: 100%;
  max-width: 800px;
}
</style>
